<template>
	<view>
		<view
			v-for="(item, index) in stepList"
			:key="index"
			class="flex"
			:id="'step' + index"
		>
			<!-- 时间线 -->
			<view
				:style="{
					width: '10px',
					marginTop: index === 0 && isRender ? (item.height / 2 + 'px') : 0,
				}"
			>
				<view
					v-if="index !== 0"
					:style="{
						width: '2px',
						height: '50%',
						background: lineBg,
						margin: '0 auto'
					}"
				></view>
				
				<view
					:style="{
						width: '10px',
						height: '10px',
						borderRadius: '50%',
						backgroundColor: lineCircleBg,
						margin: '0 auto'
					}"
				></view>
				
				<view
					v-if="index !== stepList.length - 1"
					:style="{
						width: '2px',
						height: (item.height / 2 + 'px'),
						background: lineBg,
						margin: '0 auto'
					}"
				></view>
			</view>
			
			<!-- 内容部分 -->
			<view class="flex-1 mar-l-20 mar-t-10"
				:style="{
					borderBottom: index !== stepList.length - 1 ? '1px #e6e6e6 solid' : 'none',
					paddingBottom: '10px'
				}"
			>
				<view class="flex justify-between align-center">
					<view
						:style="{
							color: titleColor,
							fontSize: titleFontSize + 'px',
							fontWeight: isTitleBolder ? '800' : 'normal'
						}"
					>
						<text>{{ item[titleProp] }}</text>
					</view>
					
					<view
						:style="{
							color: contentColor,
							fontSize: contentFontSize + 'px',
						}"
					>
						<text>{{ item[contentProp] }}</text>
					</view>
				</view>
				
				<view
					class="mar-t-10"
					:style="{
						color: descColor,
						fontSize: descFontSize + 'px',
					}"
				>
					<text>{{ item[descProp] }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 步骤列表
			stepList: {
				type: Array,
				default: function() {
					return []
				}
			},
			
			// 时间线圆圈背景色
			lineCircleBg: {
				type: String,
				default: '#d3d3ff'
			},
			
			// 时间线背景色
			lineBg: {
				type: String,
				default: '#f2f2ff'
			},
			
			// 标题字段
			titleProp: {
				type: String,
				default: 'title'
			},
			
			// 标题颜色
			titleColor: {
				type: String,
				default: '#333333'
			},
			
			// 标题字体大小
			titleFontSize: {
				type: Number,
				default: 14
			},
			
			// 标题是否加粗
			isTitleBolder: {
				type: Boolean,
				default: true
			},
			
			// 右侧内容显示的字段
			contentProp: {
				type: String,
				default: 'content'
			},
			
			// 内容部分字体颜色
			contentColor: {
				type: String,
				default: '#999'
			},
			
			// 内容部分字体大小
			contentFontSize: {
				type: Number,
				default: 14
			},
			
			// 描述内容显示的字段
			descProp: {
				type: String,
				default: 'desc'
			},
			
			// 描述部分字体颜色
			descColor: {
				type: String,
				default: '#999'
			},
			
			// 描述部分字体大小
			descFontSize: {
				type: Number,
				default: 14
			},
		},
		
		mounted() {
			this.isRender = true
			this.stepList.forEach((item, index) => {
				item.height = document.getElementById('step' + index).offsetHeight
			})
		},
		
		data() {
			return {
				// 检测dom是否渲染完成，用来控制获取时间线高度变化（不可删除）
				isRender: false,
			}
		},
		
		methods: {
			
		}
	}
</script>

<style scoped>
	
</style>